<template>
  <div>
    <div ref="table" style="position: absolute; width: 600px;height:400px;left:20px;top:20px;"></div>
  </div>
</template>

<script>
import  * as VTablePlugins from '@visactor/vtable-plugins';
import * as VTableSheet from '@visactor/vtable-sheet'
export default {
  name: '',
  props: [],
  components: {},
  data() {
    return {
     tableInstance: null,
    };
  },
  created() {},
  mounted() {
    this.createTable()
  },
  methods: {
    createTable() {
      const container = this.$refs.table
      this.tableInstance = new VTableSheet.VTableSheet(container, {
        showFormulaBar: true,
        showSheetTab: true,
        mainMenu: {
          show: true,  // 显示主菜单
          items: [
            {
              name: '导入',
              menuKey: VTableSheet.TYPES.MainMenuItemKey.IMPORT,  // 使用预定义的菜单键值
              description: '导入数据'  // 鼠标悬停时的提示信息
            },
            {
              name: '导出',
              items: [  // 可以嵌套多级菜单
                {
                  name: '导出CSV',
                  menuKey: VTableSheet.TYPES.MainMenuItemKey.EXPORT_CURRENT_SHEET_CSV,
                  description: '导出当前表格为CSV格式'
                },
                {
                  name: '导出Excel',
                  menuKey: VTableSheet.TYPES.MainMenuItemKey.EXPORT_CURRENT_SHEET_XLSX,
                  description: '导出当前表格为Excel格式'
                }
              ]
            }
          ]
        },
        sheets: [
          {
            sheetKey: "employees",
            sheetTitle: "员工信息",
            columns: [
              { title: '姓名', width: 100 },
              { title: '年龄', width: 80 },
              { title: '部门', width: 120 }
            ],
            data: [
              ['张三', 28, '技术部'],
              ['李四', 32, '市场部'],
              ['王五', 25, '技术部']
            ],
            active: true
          }
        ],
        VTablePluginModules: [
          // excelImportPlugin,
          // tableExportPlugin
          // Excel导入插件
          {
            module: VTablePlugins.ExcelImportPlugin,
            moduleOptions: {
              id: 'excel-import-plugin',
              exportData: true, // 是否支持导出功能
              importData: true, // 是否支持导入功能
              fileTypes: ['xlsx', 'csv'] // 支持的文件类型
            }
          },
          // 表格导出插件
          { module: VTablePlugins.TableExportPlugin,
            moduleOptions: {
              exportExcelOptions: {
                downloadFile: true,
                fileName: 'fff-excel'
              },
              exportCsvOptions: {
                downloadFile: true,
                fileName: 'fff'
              }
            }
          }
        ]
      });
    }
  },
  watch: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
